<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue的其他指令</title>

    <style>
        /*其实解决方式很简单，原理就是让元素不显示*/
        [v-cloak]{
            display: none;
        }
    </style>

</head>
<body>
<div id="app">
    <h1 v-cloak>{{msg}}</h1>
</div>

<script>
    setTimeout(() => {
        //创建一个script元素
        let scriptElt = document.createElement('script')
        //给元素设置src属性
        scriptElt.src = 'js/vue.js'
        //将元素追加到head标签内
        document.head.append(scriptElt);
    } , 3000)

    setTimeout(() => {
         const vm = new Vue({
                 el : '#app',
                 data : {
                    msg : 'Vue的其他指令'
                 }
             })
    } , 4000)

</script>

</body>
</html>